<template>
	<view class="detail_container">
		<view class="card">
			<view class="inline-item">
				<view class="label">项目名称</view>
				<view class="label-content">{{detailObj.pmName}}</view>
			</view>
			<view class="inline-item">
				<view class="label">线路</view>
				<view class="label-content">{{detailObj.concatLineName}}</view>
			</view>
			<view class="inline-item">
				<view class="label">区间/站点</view>
				<view class="label-content">{{detailObj.lineSiteSectionName}}</view>
			</view>
			<view class="inline-item">
				<view class="label">施工日期</view>
				<view class="label-content">{{detailObj.constructionDate && getDate(detailObj.constructionDate)}}</view>
			</view>
			<view class="inline-item">
				<view class="label">管理人员</view>
				<view class="label-content">{{detailObj && detailObj.pmprManagePersonList && detailObj.pmprManagePersonList.map(item => item.personName).join(",")}}</view>
			</view>
			<view class="inline-item">
				<view class="label">劳务人员</view>
				<view class="label-content">{{detailObj.laborNum > 0 ? detailObj.laborNum : 0}}人</view>
			</view>
			<view class="inline-item">
				<view class="label">施工工法</view>
				<view class="label-content">{{ detailObj.constructionMethodName || ''}}</view>
			</view>
		</view>
		<view class="work-title">
			<view>工作量明细</view>
			<view class="num">
				<text v-if="detailObj && detailObj.constructionMethod && detailObj.constructionMethod.indexOf('gh') !== -1">小计  {{subtotal || ''}}环</text>
				<text v-if="detailObj && detailObj.constructionMethod && detailObj.constructionMethod.indexOf('wrd') !== -1">小计  {{ holeNum }}孔次</text>
			</view>
		</view>	
		<u-empty v-if="pmprWorkloadList.length<=0" mode="data" text="工作量明细为空" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		<view class="work_detail" v-for="(item,index) in pmprWorkloadList" :key="item.id">
			<view v-if="detailObj && detailObj.constructionMethod && detailObj.constructionMethod.indexOf('gh') !== -1">
				<view class="" style="border-bottom: 1px solid #e2e5ed;color: #445469; font-size: 32rpx; font-weight: bold;">施工工序{{ index + 1 }}</view>
				<view class="card">
					<view class="inline-item">
						<view class="label">施工工序</view>
						<view class="label-content">{{item.steelRingProcedureName}}</view>
					</view>
					<view class="inline-item" style="height: auto;">
						<view class="label">环号</view>
						<view class="label-content">{{item.ring.join('/')}}</view>
					</view>
					<view class="inline-item-picture">
						<view class="label">施工图片</view>
							<commonLookImage :imageArr="item.imgs" width="90" height="90"></commonLookImage>
					</view>
				</view>	
			</view>
			
			<view v-else>
				<view style="border-bottom: 1px solid #e2e5ed;color: #445469; font-size: 32rpx; font-weight: bold;">施工工序{{ index + 1 }}</view>
				<view class="card">
					<view class="inline-item" style="height: auto;">
						<view class="label">工序名称</view>
						<view class="label-content">
							<text>{{ item.steelRingProcedureName }}</text>
							<text v-if="item.steelRingProcedureName === '注浆' " style="margin-left: 10rpx;">{{item.ringNumber || ''}}</text>
							<text v-else style="margin-left: 10rpx;">{{item.ringNumber || ''}}     {{ item.workload || '' }}{{ item.unit || '' }}</text>
						</view>
					</view>
					<view class="" v-if="item.steelRingProcedureName === '注浆' ">
						<view class="inline-item">
							<view class="label">水玻璃</view>
							<view class="label-content">{{item.loweGroutingAmount}}升</view>
						</view>
						<view class="inline-item">
							<view class="label">水泥浆</view>
							<view class="label-content">{{item.sludgeGroutingAmount}}升</view>
						</view>
						<view class="inline-item" v-if="item.initialSettlementValue">
							<view class="label">初始沉降值</view>
							<view class="label-content">{{item.initialSettlementValue || ''}}mm</view>
						</view>
						<view class="inline-item" v-if="item.settlementValueBeforeGrouting">
							<view class="label">注浆前沉降值</view>
							<view class="label-content">{{item.settlementValueBeforeGrouting || ''}}mm</view>
						</view>
						<view class="inline-item" v-if="item.settlementValueAfterGrouting">
							<view class="label">注浆后沉降值</view>
							<view class="label-content">{{item.settlementValueAfterGrouting || ''}}mm</view>
						</view>
					</view>
					<view class="inline-item-picture">
						<view class="label">施工图片</view>
							<commonLookImage :imageArr="item.imgs" width="90" height="90"></commonLookImage>
					</view>
				</view>	
			</view>
		</view>
			
		
		<view class="material_box" v-if="list.length">
			<view class="work-title">材料消耗</view>
<!-- 			<u-empty v-if="<=0" mode="data" text="材料为空" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty> -->
			<u-cell-group :customStyle="{background:'white'}"
				 v-for="(item, index) in list" :key="index">
			    <u-cell  :title="item.title" :value="`${item.weight}${item.unit}`" center></u-cell>
				<template  v-if="item.childrenData.length > 0">
					<view v-for="(it_item, i_index) in item.childrenData" :key="i_index">
						<u-cell center>
							<text slot="label" style="font-size: 30rpx;">规格型号</text>
							<text slot="value" style="font-size: 30rpx;">{{it_item.size}}</text>
						</u-cell>
						<u-cell center>
							<text slot="label" style="font-size: 30rpx;">消耗量</text>
							<text slot="value" style="font-size: 30rpx;">{{it_item.weight}}{{it_item.unit}}</text>
						</u-cell>
					</view>
				</template>
				
			</u-cell-group>
		</view>
		<view class="step_box" v-if="processList.length">
			<view class="name_title">流程</view>
			<view style="padding: 20rpx 0 0 50rpx;">
				<view class="step_item" v-for="item in processList" :key="item.id">
					<view class="left">
						<view class="out_cricle">
							<view class="inside_cricle"></view>
						</view>
						<u-line direction="col" style="width: 35px;" color="#86B5FB"></u-line>
					</view>
					<view class="right">
						<view class="right_top">
							<view style="display: flex;align-items: center;">
								<view class="type_color">{{ extractString(item.processName)[0] }}</view>
								<view class="type_process">
									{{ extractString(item.processName)[1] || ''}}
								</view>
							</view>
							
							<view class="grey">{{ getDate3(item.recordUpdateDate) }}</view>
						</view>
						<view class="right_top">
							<view class="grey">{{ item.createUserName }}</view>
						</view>
						<view class="right_top" v-if="item.reviewOpition">
							<view class="grey">审核意见：
								<view>
									{{item.reviewOpition}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-button"  v-if="isShowBtn">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button :loading="isClick" @click="fnStaging(detailId)"  class="button-error">不通过</button>
				<button :loading="isClick" @click="fnSubmit"  class="button-primary">通过</button>
			</view>
		</view>
		<u-loading-page :loading="isLoading"  loading-text="数据加载中·····" :color="'#3b9cff'" :bgColor="'rgba(0, 0, 0, 0.7)'"></u-loading-page>
	</view>
</template>

<script>
	import {getPicture} from '@/api/doc.js' //获取图片
	import {
		pmProcessReportGetDetail,
		pmprLogGetListByPmprId,
		pmProcessReportApproval
	} from '@/api/comprehensive/comprehensive.js'
	import mixins from '@/utils/mixins.js'
	import { mapGetters } from "vuex"
	export default {
		name:'commonDetailVue',
		mixins: [mixins],
		props:{
			detailId: {
				type:Number,
				default:-1
			},
			isShowBtn: {
				type:Boolean,
				default:false
			}
		},
		  computed: {
		    ...mapGetters(['dictMap']),
		  },
		data() {
			return {
				loading:false,
				detailObj: {}, // 详情对象
				list: [],		//页面组装的数据结构
				processList:[], 	//
				pmprWorkloadList:[] ,//绑定在页面上的工作量明细
				subtotal:0 ,//工作明细的小计
				isClick:false,
				isLoading:false,
				holeNum:''
			}
		},
		mounted() {
			console.log(this.detailId, '父组件传的id---mounted')
			this.fnGetDetail()	
		},
		methods: {
			extractString(inputString) {
			  // 使用正则表达式匹配括号内的内容
			  const regex = /\((.*?)\)/;
			  const match = regex.exec(inputString);
			
			  if (match) {
			    // 如果匹配到括号，则返回括号前的内容和括号内的内容
			    const beforeParentheses = inputString.split('(')[0].trim();
			    const insideParentheses = match[1].trim();
			    return [beforeParentheses, insideParentheses];
			  } else {
			    // 如果没有匹配到括号，则直接返回传入的字符串
			    return [inputString];
			  }
			},
			// 返回上一级
			goBack(url) {
				uni.navigateBack({})
			},
			
			/**
			 * 得到详情页数据
			 */
			async fnGetDetail(){
				// uni.showLoading({
				// 	title:'数据加载中...',
				// 	mask:true
				// })
				// this.isLoading = true
				let res = await pmProcessReportGetDetail({id:this.detailId})
				
				this.detailObj = res.result
				this.$set(this.detailObj,'concatLineName',`${res.result.lineName}${res.result.branchLineName ? '(' + res.result.branchLineName + ')' : ''}`  || "")
				let typeObj = this.$store.getters.dictMap['construction_method'].find(it => it.groupCode === res.result.constructionMethod)
				if(typeObj) {
					this.$set(this.detailObj,'constructionMethodName',typeObj.name)
				}
				console.log(this.detailObj,'详情页信息')
				// 微扰动页面的工作明细
				if(this.detailObj.constructionMethod.indexOf("wrd") !== -1) {
					this.wrdRingDataConcat(res.result.pmprWorkloadList);
				}else {
					this.ringDataConcat(res.result.pmprWorkloadList);
				}
				// return
				
				 
				// 材料消耗
				this.pmprMaterial(res.result.pmprMaterialList);
				// 判断数据中是否有docsId,有的话从数据库中获取图片
				// console.log(this.pmprWorkloadList, '准备请求图片接口')
				this.pmprWorkloadList.forEach(async (it,index) => {
					it.imgs = new Array();
					// 区分页面是属于钢环还是微扰动 钢环是有docsId:Number[]数组  微扰动则是单独的docId:Number
					if(it.docId){
						it.imgs = await this.getItemImage(it.docId);
						this.$set(this.pmprWorkloadList,index,it);
					}else if(it.docsId){
						it.docsId = Array.from(new Set(it.docsId))
						it.imgs = await this.getItemImage(it.docsId[0]);
						this.$set(this.pmprWorkloadList,index,it);
					}
				})
				console.log(this.pmprWorkloadList, '最后数据')
				await this.getPrecessData(this.detailObj.id)
				// uni.hideLoading()
				// this.isLoading = false
			},
			/**
			 * 获取到docId中的图片并且拼成网络路径格式
			 * @param {Number} docId
			 * @return {String} //拼好的网络路径格式
			 */
			async getItemImage(docId){
				console.log(docId, '传进来的id')
				return await new Promise((resolve,reject) => {
					getPicture({
						docId
					}).then(res=>{
						resolve(res.result.map(it => ({
							...it,
							url:this.$config.IMG_FILE_URL + it.fileName
						})));
					}).catch(err=>reject(err))
				})
			},
			/**
			 * 钢环和微扰动的材料消耗 -通用
			 * 组装成绑定于页面上的list格式
			 * @param {Array} temp 接口的材料消耗数据
			 */
			pmprMaterial(temp){
				let resultData = []; // 筛选的最后结果
				
				temp.forEach(it => {
					//resultData 的元素 materialList:
					let obj = {
						// 该材料对应的所有的型号 对象数组 包含型号名-specificationModel 和消耗量-num
						materialModelList:[],
						// 其他需要的信息  
						steelRingProcedureName:it.parentTypeName + '-' + it.deviceTypeName,
						// 当前材料的总计消耗量
						totalSubtotal:0,
						id:it.id,
						unit:''
					}; 
					// 根据名字来筛选出同类的
					let name = it.parentTypeName + '-' + it.deviceTypeName;
					let filterRes = temp.filter(kt => {
						return kt.parentTypeName + '-' + kt.deviceTypeName === name
					})
					filterRes.forEach(kt => {
						obj.totalSubtotal += Number.parseFloat(kt.num);
						obj.unit = kt.unit
						obj.materialModelList.push({
							specificationModel:kt.deviceTypeAttributeName,
							num:kt.num,
							// 材料消耗的节点
							stationName:kt.stationName,
							unit:kt.unit
						});
					});
					resultData.find(kt => kt.steelRingProcedureName == obj.steelRingProcedureName) == undefined && resultData.push(obj)
				})
				
				// 绑定在list上
				this.list = resultData.map(it => {
					return {
						title:it.steelRingProcedureName,
						weight:it.totalSubtotal,
						unit:it.unit || '',
						childrenData:it.materialModelList.map(kt => {return {
							size:kt.specificationModel,
							weight:kt.num,
							stationName:kt.stationName,
							unit:kt.unit
						}})
					}
				})
				console.log(this.list, '看数据11')
			},
			/**
			 * 微扰动的数据 微扰动页面
			 * @param {Array} temp
			 */
			wrdRingDataConcat(temp){
				this.pmprWorkloadList = temp
				this.holeNum = this.pmprWorkloadList.length
				console.log(temp,'kk1')
			},
			/**
			 * 关于是环号的页面工作明细数据的拼接 仅限钢环页面
			 * @param {Array} temp
			 */
			ringDataConcat(temp){
				let resultData = []; // 筛选的最后结果
				const testObj = {};
				temp.forEach(({docId, workload, ringNumber, steelRingProcedureName, isHidden}) => {
					if(testObj[steelRingProcedureName]){
						testObj[steelRingProcedureName].ringNumbers.push(ringNumber);
					}else{
						testObj[steelRingProcedureName] = {docId, workload, ringNumbers:[ringNumber], steelRingProcedureName, isHidden}
					}
				})
				temp.forEach(it => {
					//resultData 的元素 ring:环号数组
					let obj = {
						ring:[],
						// 其他需要的信息, 图片; 需要接口的数据就加载obj里面
						steelRingProcedureName:it.steelRingProcedureName,
						id:it.id,
						workload:it.workload, //系数
						unit:it.unit, 
						isHidden: it.isHidden,
						constructionMethod:it.constructionMethod
					}; 
					
					// 根据名字来筛选出同类的
					let name = it.steelRingProcedureName;
					let filterRes = temp.filter(kt => {
						return kt.steelRingProcedureName === name
					})
					// 如果有docId为有图片的情况，添加到数组中
					it.docId && (obj.docsId = new Array());
					filterRes.forEach(kt => {
						obj.ring.push(kt.ringNumber + '环');
						it.docId && obj.docsId.push(kt.docId);
					});
					
					resultData.find(kt => kt.steelRingProcedureName == obj.steelRingProcedureName) == undefined && resultData.push(obj);
					
				})
				// 算出每个元素的系数： 环号数 * 工作系数
				resultData = resultData.map(it => {
					return{
						...it,
						isHidden: it.isHidden == "true" ? true : false,
						totalWordlorad:it.constructionMethod === 'gh' 
										? it.workload * it.ring.length
										: (it.workload / 2) * it.ring.length
					}
				})
				// 小计
				this.subtotal = 0;
				resultData.forEach(it => {
					this.subtotal += Number.parseFloat(it.totalWordlorad)
				})
				this.subtotal = Math.floor(this.subtotal * 100) / 100 
				this.pmprWorkloadList = resultData;
				console.log(this.pmprWorkloadList, this.subtotal,'348行')
			},
			// 获取流程数据
			async getPrecessData(id) {
				return await new Promise((resolve, reject) => {
					pmprLogGetListByPmprId({pmprId:id}).then(res => {
						resolve(this.processList = res.result)
					})
				}) 
			},
			fnSubmit() {
				let _parmas = {
					id: this.detailId, // 上报id
					reviewStatus: 'tg', //审核状态
					reviewOpition: '', //审核意见
				}
				if(this.isClick) return
				this.isClick = true
				this.loading = true
				pmProcessReportApproval(_parmas).then(res => {
					if (res.success && res.status === 1) {
						uni.showToast({
							icon: 'success',
							title: '审核成功!'
						})
					}
					setTimeout(() => {
						uni.navigateBack({})
						this.loading = false
					}, 1800)
				})
			
			},
			// 不通过
			fnStaging(id) {
				uni.navigateTo({
					url: `/subpackage-overhaul/pages/comprehensiveOverhaul/progressReview/reviewComments?id=${id}`
				})
			},
			// 截取字符串
			getCaption(obj) {
				if (obj.indexOf("(") !== -1) {
					var index = obj.lastIndexOf("(");
					obj = obj.substring(index + 1, obj.length - 1);
				}
				return obj;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.detail_container {
		background-color: #f5f5f9;
		padding-top: 26rpx;
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
	}
	.con_top {
		background-color: #fff;
		padding: 0 40rpx;
		.row_line {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			.line_name {
				flex: 2;
			}
			.line_value1 {
				flex: 5;
				text-align: center;
			}
			.line_value {
				flex: 5;
				text-align: center;
			}
		}
	}
	.work_detail {
		background-color: #fff;
		padding: 8rpx 30rpx 20rpx 30rpx;
		line-height: 80rpx;
		.top_img {
			display: flex;
			overflow-x: auto;
			&>view{
				width: 200rpx;
				margin-right: auto;
			}
		}
	}

	.little_box {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 0 40rpx;
	}
	.num {
		text-align: right;
	}
	.step_box {
		background-color: white;
		margin-top: 40rpx;
		.name_title {
				
				padding: 30rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #22204E;
			
		}
		.step_item {
			// padding: 20rpx;
			overflow: hidden;
			display: flex;
			line-height: 30px;

			.left {
				overflow: hidden;

				.out_cricle {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background-color: #f5f5f9;
					display: flex;
					align-items: center;
					justify-content: center;
					.inside_cricle {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background-color: #3d99ce
					}
				}
			}
			.right {
				flex: 2;
				// margin-left: -30rpx;
				padding-right: 30rpx;
				position: relative;
				bottom: 5px;

				.right_top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.type_color {
						font-size: 32rpx;
						color: #2F80ED;
					}
					.type_process {
						margin-left: 10rpx;
						font-size: 28rpx;
						color: white;
						padding: 0 24rpx;
						clip-path: polygon(15rpx 0, 100% 0, calc(100% - 15rpx) 52rpx, 0% 52rpx);
						background: linear-gradient(90deg, #FF2B2B 0%, #FF603D 100%)
					}
					.grey {
						font-size: 28rpx;
						color: #6A819E;
					}
				}

			}
		}
	}
	.work-title {
		padding: 30rpx; 
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.btn_box {
		height: 100rpx;
		.btn_grup {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			bottom: 0px;
			width: 100%;
		}
	}
	.card {
		background: #fff;
		padding: 10upx 32upx 0 28upx;
		font-weight: bold;
		
		.inline-item {
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #e2e5ed;
			
			&:last-of-type {
				border-bottom: none;
				margin-bottom: 0;
			}
			
			.label {
				color: #445469;
				flex-shrink: 0;
			}
			
			.label-content {
				max-width: 430upx;
				// white-space: nowrap;
				// overflow: hidden;
				// text-overflow: ellipsis;
				// padding-right: 4upx;
			}
		}
	}
</style>
